<template>
	<view class="message-container">
		<!-- 高级毛玻璃背景 -->
		<view class="blur-layer"></view>

		<!-- 主内容容器 - 确保水平居中 -->
		<view class="content-wrapper">
			<!-- 标题栏 -->
			<view class="header">
				<text class="title">消息中心</text>
				<view class="header-actions">
					<uni-icons type="search" size="24" color="#333"></uni-icons>
					<uni-icons type="more" size="24" color="#333"></uni-icons>
				</view>
			</view>

			<!-- 分类标签 -->
			<scroll-view class="category-tabs" scroll-x>
				<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{active: activeTab === index}"
					@click="activeTab = index">
					<text>{{tab}}</text>
				</view>
			</scroll-view>

			<!-- 消息列表 -->
			<scroll-view class="message-list" scroll-y :scroll-with-animation="true" :scroll-top="scrollTop">
				<view class="message-card" v-for="(item, index) in filteredMessages" :key="item.id"
					:class="{'unread': !item.isRead, 'priority': item.priority}" @click="openMessage(item)">
					<!-- 左侧信息区 -->
					<view class="message-meta">
						<image class="sender-avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="meta-text">
							<text class="sender-name">{{item.sender}}</text>
							<text class="send-time">{{formatTime(item.time)}}</text>
						</view>
					</view>

					<!-- 中间内容区 -->
					<view class="message-content">
						<text class="message-title">{{item.title}}</text>
						<text class="message-preview">{{item.content}}</text>
					</view>

					<!-- 右侧状态区 -->
					<view class="message-status">
						<view class="status-badge" v-if="item.priority">
							<uni-icons type="star-filled" size="16" color="#FF9500"></uni-icons>
						</view>
						<view class="unread-indicator" v-if="!item.isRead"></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: ['全部', '未读', '工作', '系统', '社交'],
				scrollTop: 0,
				messageData: [{
						id: 1,
						title: "季度财务报告审核通知",
						content: "请查阅并审批2023年Q3财务报告，截止日期为本周五，请查阅并审批2023年Q3财务报告，截止日期为本周五，请查阅并审批2023年Q3财务报告，截止日期为本周五",
						sender: "财务部-张总监",
						avatar: "/static/avatars/avatar1.jpg",
						time: new Date().getTime() - 1000 * 60 * 30,
						isRead: false,
						priority: true,
						type: "work"
					},
					{
						id: 2,
						title: "系统维护通知",
						content: "计划于今晚23:00至次日3:00进行系统维护，请提前保存工作",
						sender: "IT支持中心",
						avatar: "/static/avatars/avatar2.jpg",
						time: new Date().getTime() - 1000 * 60 * 120,
						isRead: true,
						priority: false,
						type: "system"
					},
					{
						id: 3,
						title: "团队建设活动邀请",
						content: "本周六上午10点组织团队户外拓展活动，请确认是否参加",
						sender: "人力资源部",
						avatar: "/static/avatars/avatar3.jpg",
						time: new Date().getTime() - 1000 * 60 * 60 * 5,
						isRead: false,
						priority: false,
						type: "social"
					},
					{
						id: 4,
						title: "项目进度会议纪要",
						content: "今日项目会议纪要已上传至共享文档，请各位查阅",
						sender: "项目经理-李工",
						avatar: "/static/avatars/avatar4.jpg",
						time: new Date().getTime() - 1000 * 60 * 60 * 8,
						isRead: true,
						priority: true,
						type: "work"
					},
					{
						id: 5,
						title: "新版本功能需求确认",
						content: "请对V2.3版本新增功能需求进行确认，如有修改意见请于今日反馈",
						sender: "产品部-王经理",
						avatar: "/static/avatars/avatar5.jpg",
						time: new Date().getTime() - 1000 * 60 * 60 * 24,
						isRead: false,
						priority: true,
						type: "work"
					}
				]
			}
		},
		computed: {
			filteredMessages() {
				if (this.activeTab === 0) return this.messageData;
				if (this.activeTab === 1) return this.messageData.filter(m => !m.isRead);
				const typeMap = ['all', 'unread', 'work', 'system', 'social'];
				return this.messageData.filter(m => m.type === typeMap[this.activeTab]);
			}
		},
		methods: {
			formatTime(timestamp) {
				const now = new Date();
				const msgDate = new Date(timestamp);
				const diff = now - msgDate;

				if (diff < 60 * 1000) return "刚刚";
				if (diff < 60 * 60 * 1000) return `${Math.floor(diff / (60 * 1000))}分钟前`;
				if (now.toDateString() === msgDate.toDateString()) {
					return msgDate.toLocaleTimeString([], {
						hour: '2-digit',
						minute: '2-digit'
					});
				}
				if (diff < 7 * 24 * 60 * 60 * 1000) {
					const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					return days[msgDate.getDay()];
				}
				return `${msgDate.getMonth()+1}月${msgDate.getDate()}日`;
			},
			openMessage(item) {
				item.isRead = true;
				uni.navigateTo({
					url: `/pages/message/detail?id=${item.id}`
				});
			}
		},
		watch: {
			activeTab() {
				this.scrollTop = this.scrollTop === 0 ? 1 : 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 设计变量 */
	$primary-color: #007AFF;
	$secondary-color: #34C759;
	$danger-color: #FF3B30;
	$warning-color: #FF9500;
	$dark-text: #1C1C1E;
	$light-text: #8E8E93;
	$bg-blur: rgba(255, 255, 255, 0.7);
	$border-color: rgba(0, 0, 0, 0.08);
	$spacing-lg: 24px;
	$spacing-md: 16px;
	$spacing-sm: 8px;
	$border-radius-lg: 16px;
	$border-radius-md: 12px;
	$border-radius-sm: 6px;
	$shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
	$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

	/* 基础容器 */
	.message-container {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		/* 确保内容水平居中 */
		background: linear-gradient(135deg, #F5F7FA 0%, #E4E8EB 100%);
		overflow: hidden;
	}

	/* 毛玻璃层 */
	.blur-layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $bg-blur;
		backdrop-filter: blur(30px);
		-webkit-backdrop-filter: blur(30px);
		z-index: 0;
	}

	/* 主内容容器 - 居中控制 */
	.content-wrapper {
		width: 100%;
		max-width: 1200px;
		/* 设置最大宽度避免过宽 */
		height: 100%;
		display: flex;
		flex-direction: column;
		z-index: 1;
		padding: 0 $spacing-lg;
		box-sizing: border-box;
	}

	/* 标题栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: $spacing-lg 0;

		.title {
			font-size: 24px;
			font-weight: 600;
			color: $dark-text;
		}

		.header-actions {
			display: flex;
			gap: $spacing-md;
		}
	}

	/* 分类标签 */
	.category-tabs {
		padding-bottom: $spacing-md;
		white-space: nowrap;

		.tab-item {
			display: inline-flex;
			padding: $spacing-sm $spacing-md;
			margin-right: $spacing-sm;
			border-radius: $border-radius-md;
			font-size: 15px;
			color: $light-text;
			transition: all 0.2s ease;

			&.active {
				background: rgba($primary-color, 0.1);
				color: $primary-color;
				font-weight: 500;
			}
		}
	}

	/* 消息列表 */
	.message-list {
		flex: 1;
		width: 100%;
	}

	/* 消息卡片 */
	.message-card {
		position: relative;
		display: flex;
		align-items: center;
		padding: $spacing-md;
		margin-bottom: $spacing-md;
		background: rgba(255, 255, 255, 0.9);
		border-radius: $border-radius-lg;
		box-shadow: $shadow-sm;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

		&:last-child {
			margin-bottom: 0;
		}

		&.unread {
			background: rgba(255, 255, 255, 0.95);
			box-shadow: $shadow-md;

			.message-title {
				font-weight: 600;
			}
		}

		&.priority {
			border-left: 4px solid $warning-color;
		}

		&:active {
			transform: scale(0.98);
		}
	}

	/* 消息元信息 */
	.message-meta {
		display: flex;
		align-items: center;
		flex: 0 0 200px;

		.sender-avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			margin-right: $spacing-sm;
			background: #EEE;
		}

		.meta-text {
			display: flex;
			flex-direction: column;
		}

		.sender-name {
			font-size: 16px;
			font-weight: 500;
			color: $dark-text;
			margin-bottom: 2px;
		}

		.send-time {
			font-size: 13px;
			color: $light-text;
		}
	}

	/* 消息内容 */
	.message-content {
		flex: 1;
		padding: 0 $spacing-md;
		overflow: hidden;

		.message-title {
			font-size: 17px;
			color: $dark-text;
			margin-bottom: $spacing-sm;
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.message-preview {
			font-size: 15px;
			color: $light-text;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			line-height: 1.4;
		}
	}

	/* 消息状态 */
	.message-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 40px;

		.status-badge {
			margin-bottom: $spacing-sm;
		}

		.unread-indicator {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: $primary-color;
		}
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.message-card {
		animation: fadeIn 0.4s both;

		@for $i from 1 through 10 {
			&:nth-child(#{$i}) {
				animation-delay: $i * 0.05s;
			}
		}
	}

	/* 平板横屏优化 */
	@media (min-width: 768px) and (orientation: landscape) {
		.content-wrapper {
			padding: 0 40px;
			/* 增加两侧内边距 */
		}

		.header {
			padding: 28px 0 $spacing-md;
		}

		.message-card {
			padding: 20px;
		}

		.message-meta {
			flex: 0 0 220px;

			.sender-avatar {
				width: 52px;
				height: 52px;
			}

			.sender-name {
				font-size: 17px;
			}
		}

		.message-content {
			.message-title {
				font-size: 18px;
			}

			.message-preview {
				font-size: 16px;
			}
		}
	}

	/* 大屏平板进一步优化 */
	@media (min-width: 1024px) and (orientation: landscape) {
		.content-wrapper {
			max-width: 900px;
			/* 在大屏上限制最大宽度 */
		}
	}
</style>